"use client"

import {useEffect, useState} from "react"
import {FileTree, type FileTreeItem} from "@/components/file-tree"
import {Editor} from "@monaco-editor/react"
import {Button} from "@/components/ui/button"
import {Save} from "lucide-react"

interface ProjectEditorProps {
    files: FileTreeItem[]
    onSave?: (path: string, content: string) => void
}

export function ProjectEditor({files, onSave}: ProjectEditorProps) {
    const [selectedFile, setSelectedFile] = useState<FileTreeItem | null>(null)
    const [fileContent, setFileContent] = useState<string>("")
    const [isEditing, setIsEditing] = useState(false)

    useEffect(() => {
        if (selectedFile && selectedFile.type === "file") {
            // 在实际应用中，这里会从某处获取文件内容
            // 这里我们模拟一些基本内容
            let content = ""

            if (selectedFile.path.endsWith(".vue")) {
                content = `<template>
  <div>
    <!-- ${selectedFile.name} component -->
    <h1>Hello from ${selectedFile.name}</h1>
  </div>
</template>

<script setup lang="ts">
// Component logic here
</script>

<style scoped>
/* Component styles here */
</style>`
            } else if (selectedFile.path.endsWith(".ts")) {
                content = `// ${selectedFile.name}
export default {
  // TypeScript code here
}`
            } else if (selectedFile.path.endsWith(".json")) {
                content = `{
  "name": "vue-project",
  "version": "0.0.1",
  "private": true
}`
            } else if (selectedFile.path.endsWith(".html")) {
                content = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Project</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>`
            }

            setFileContent(content)
        }
    }, [selectedFile])

    const handleFileSelect = (file: FileTreeItem) => {
        if (file.type === "file") {
            setSelectedFile(file)
            setIsEditing(false)
        }
    }

    const handleSave = () => {
        if (selectedFile && onSave) {
            onSave(selectedFile.path, fileContent)
            setIsEditing(false)
        }
    }

    const getLanguage = (filePath: string) => {
        if (filePath.endsWith(".vue")) return "html"
        if (filePath.endsWith(".ts")) return "typescript"
        if (filePath.endsWith(".js")) return "javascript"
        if (filePath.endsWith(".json")) return "json"
        if (filePath.endsWith(".html")) return "html"
        if (filePath.endsWith(".css")) return "css"
        return "plaintext"
    }

    return (
        <div className="flex h-[600px] border rounded-md overflow-hidden">
            <div className="w-64 border-r overflow-y-auto">
                <FileTree items={files} onSelect={handleFileSelect} selectedPath={selectedFile?.path}/>
            </div>
            <div className="flex-1 flex flex-col">
                {selectedFile ? (
                    <>
                        <div className="flex items-center justify-between p-2 border-b bg-muted">
                            <div className="text-sm font-medium">{selectedFile.path}</div>
                            {selectedFile.type === "file" && (
                                <Button size="sm" variant="outline" onClick={handleSave} disabled={!isEditing}>
                                    <Save className="h-4 w-4 mr-1"/>
                                    保存
                                </Button>
                            )}
                        </div>
                        <div className="flex-1">
                            {selectedFile.type === "file" ? (
                                <Editor
                                    height="100%"
                                    language={getLanguage(selectedFile.path)}
                                    value={fileContent}
                                    onChange={(value) => {
                                        setFileContent(value || "")
                                        setIsEditing(true)
                                    }}
                                    options={{
                                        minimap: {enabled: false},
                                        scrollBeyondLastLine: false,
                                        fontSize: 14,
                                    }}
                                />
                            ) : (
                                <div className="p-4 text-center text-muted-foreground">
                                    <p>这是一个目录，请选择一个文件进行编辑</p>
                                </div>
                            )}
                        </div>
                    </>
                ) : (
                    <div className="flex items-center justify-center h-full text-muted-foreground">
                        <p>请从左侧选择一个文件</p>
                    </div>
                )}
            </div>
        </div>
    )
}
